import { Button } from 'antd';
import React, { useEffect, useState } from 'react';
import { ScCharts } from 'sc-components-test';
export default () => {
  const [count, setCount] = useState(0);
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState<boolean>(false);

  const asyncFetch = () => {
    setLoading(true);
    fetch(
      'https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json',
    )
      .then((response) => response.json())
      .then((json) => {
        //模拟延迟
        setTimeout(() => {
          setData(json);
          setCount(count + 1);
          setLoading(false);
        }, 500);
      })
      .catch((error) => {
        console.log('fetch data failed', error);
      });
  };
  useEffect(() => {
    asyncFetch();
  }, []);
  const config = {
    data,
    padding: 'auto',
    xField: 'Date',
    yField: 'scales',
    xAxis: {
      // type: 'timeCat',
      tickCount: 5,
    },
  };

  return (
    <>
      <Button type="primary" style={{ margin: 10 }} onClick={asyncFetch}>
        更新数据
      </Button>
      <div style={{ margin: 10 }}>数据更新次数{count}</div>
      <ScCharts customConfig={config} type="Line" loading={loading} />;
    </>
  );
};
